<template>
	<view class="userinfo">
		<view class="info-head-line">
			<image class="info-icon" src="../../static/my-icon/left.png" mode="" @tap="$Router.back()" ></image>
			<view class="info-title">个人信息</view>
		</view>
		<view class="info-head">
			<image class="img-head-my" src="../../static/img/big_3.png" mode="aspectFill"></image>
			<view class="title-name-my">更改头像</view>
		</view>
		<view class="user-info">
			<view class="info-item">
				<view class="item-name">昵称设置</view>
				<input class="ipt" type="text" maxlength="10" placeholder="" v-model="username">
			</view>
			<view class="info-item">
				<view class="item-name">手机号</view>
				<input class="ipt" type="number" maxlength="11" placeholder="" v-model="phone">
			</view>
		</view>
		<view class="info-btn">
			<view class="btn_ red-btn">
				保存修改
			</view>
			<view class="btn_ white-btn">
				切换账号
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				username: '逃之夭夭',
				phone: '16692383507'
			};
		}
	}
</script>

<style lang="scss">
	page {
		// background-color: #ccc;
	}

	.userinfo {
		.info-head-line {
			position: fixed;
			top: 76rpx;
			left: 0;
			width: 100%;
			height: 50rpx;
			display: flex;
			align-items: center;
			padding-left: 19rpx;
			z-index: 9999;

			.info-icon {
				width: 20rpx;
				height: 36rpx;
			}

			.info-title {
				position: absolute;
				left: 50%;
				top: 50%;
				transform: translate(-50%, -50%);
				font-size: 32rpx;
				letter-spacing: 3rpx;
				color: #ffffff;
			}
		}

		.info-head {
			width: 100%;
			height: 450rpx;
			opacity: 0.8;
			background: url('../../static/img/my-bj.png') no-repeat;
			background-size: cover;
			display: flex;
			flex-direction: column;
			align-items: center;
			padding-top: 180rpx;
			box-sizing: border-box;

			.img-head-my {
				width: 173rpx;
				height: 173rpx;
				border-radius: 50%;
			}

			.title-name-my {
				margin-top: 15rpx;
				font-size: 30rpx;
				font-weight: normal;
				font-stretch: normal;
				line-height: 24rpx;
				letter-spacing: 3rpx;
				color: #ffffff;
			}
		}

		.user-info {
			background-color: #fff;
			padding: 0 19rpx;
			margin-top: 20rpx;

			.info-item {
				height: 90rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 0 25rpx;
				border-bottom: 1rpx solid #e5e5e5;

				.item-name {
					font-size: 30rpx;
					letter-spacing: 3rpx;
					color: #333333;
				}

				.ipt {
					text-align: right;
					font-size: 26rpx;
					letter-spacing: 3rpx;
					color: #696969;
				}
			}

			.info-item:last-child {
				border-bottom: none;
			}
		}

		.info-btn {
			display: flex;
			flex-direction: column;
			align-items: center;
			position: fixed;
			bottom: 218rpx;
			left: 50%;
			transform: translateX(-50%);
			.btn_ {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 713rpx;
				height: 100rpx;
				border-radius: 50rpx;
			}

			.red-btn {
				font-size: 36rpx;
				letter-spacing: 4rpx;
				color: #ffffff;
				background-color: #c60122;
				margin-bottom: 40rpx;
			}

			.white-btn {
				background-color: #ffffff;
				border: solid 1rpx #dddddd;
				font-size: 36rpx;
				letter-spacing: 4rpx;
				color: #666666;
			}
		}
	}
</style>
